<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { recipeApi } from '../request'
import type { Recipe } from '../request/api/recipe'

const route = useRoute()
const router = useRouter()
const recipeId = route.params.id

const recipe = ref<Recipe>()
const isLoading = ref(false)
const error = ref('')

// 获取菜谱详情
const fetchRecipeDetail = async () => {
  try {
    isLoading.value = true
    error.value = ''

    const response = await recipeApi.getRecipe(recipeId as string)
    recipe.value = response
  } catch (e) {
    console.error('获取菜谱详情失败:', e)
    error.value = '获取菜谱详情失败，请稍后重试'
  } finally {
    isLoading.value = false
  }
}

// 获取用餐时间的中文名称
const getMealTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    breakfast: '早餐',
    lunch: '午餐',
    dinner: '晚餐'
  }
  return typeMap[type] || '其他'
}

// 编辑菜谱
const handleEdit = () => {
  router.push(`/recipe/${recipeId}/edit`)
}

onMounted(fetchRecipeDetail)
</script>

<template>
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div v-if="isLoading" class="text-center py-12">
      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
      <p class="mt-4 text-gray-600">加载菜谱中...</p>
    </div>

    <div v-else-if="error" class="text-center py-12">
      <p class="text-red-500">{{ error }}</p>
      <button
        @click="fetchRecipeDetail"
        class="mt-4 btn btn-primary"
      >
        重试
      </button>
    </div>

    <div v-else-if="recipe" class="card">
      <img
        :src="recipe.imageUrl"
        :alt="recipe.name"
        class="w-full h-64 object-cover"
      />
      <div class="p-6">
        <div class="flex justify-between items-start">
          <h1 class="text-3xl font-bold text-gray-900">{{ recipe.name }}</h1>
          <button
            @click="handleEdit"
            class="btn btn-primary"
          >
            编辑菜谱
          </button>
        </div>
        
        <div class="mt-4 flex flex-wrap items-center gap-4">
          <div class="flex items-center text-sm text-gray-500">
            <svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            {{ recipe.cookingTime }} 分钟
          </div>

          <div class="flex items-center text-sm text-gray-500">
            <span class="mr-1">辣度:</span>
            <div class="flex">
              <span
                v-for="n in 5"
                :key="n"
                class="text-red-500"
              >
                {{ n <= recipe.spicyLevel ? '🌶️' : '·' }}
              </span>
            </div>
          </div>

          <div class="flex flex-wrap gap-2">
            <span
              v-for="mealType in recipe.mealTypes"
              :key="mealType"
              class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-600 rounded-full"
            >
              {{ getMealTypeText(mealType) }}
            </span>
          </div>

          <div class="flex flex-wrap gap-2">
            <span
              v-for="tag in recipe.tags"
              :key="tag"
              class="px-2 py-1 text-xs font-medium bg-primary-100 text-primary-600 rounded-full"
            >
              {{ tag }}
            </span>
          </div>
        </div>

        <div class="mt-8">
          <h2 class="text-xl font-semibold text-gray-900 mb-4">食材</h2>
          <ul class="space-y-2">
            <li
              v-for="ingredient in recipe.ingredients"
              :key="ingredient"
              class="flex items-center text-gray-700"
            >
              <svg class="h-5 w-5 mr-2 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
              </svg>
              {{ ingredient }}
            </li>
          </ul>
        </div>

        <div class="mt-8">
          <h2 class="text-xl font-semibold text-gray-900 mb-4">步骤</h2>
          <ol class="space-y-4">
            <li
              v-for="(step, index) in recipe.steps"
              :key="index"
              class="flex"
            >
              <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full bg-primary-100 text-primary-600 font-medium">
                {{ index + 1 }}
              </span>
              <span class="ml-4 text-gray-700">{{ step }}</span>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>